<template>
  <!-- 唯一父元素 -->
  <div class="sutra_content">
    <!-- 父元素第一个商品 -->
    <div class="sutra_single" v-for="(item,i) of items" :key="i">
      <!-- a标签包裹内容 -->
      <a href="javascript:;">
        <!-- 上部分img -->
        <div class="sutra_img">
          <img v-bind:src=item.region[0] />
        </div>
        <!-- 下部分title -->
        <div class="sutra_tilte">
          <span>{{item.region[1]}}</span>
          <span>{{item.region[2]}}</span>
          <span>人均￥{{item.region[3]}}/晚</span>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        items:[
            {region:[require("../../../public/images/sutra1.jpg"),"香港","亚洲美食之都",440]},
            {region:[require("../../../public/images/sutra2.jpg"),"清迈","泰国最文艺小城",168]},
            {region:[require("../../../public/images/sutra3.jpg"),"伦敦","感受英伦风情",354]},
            {region:[require("../../../public/images/sutra4.jpg"),"普吉岛","东南亚看海",360]},
            {region:[require("../../../public/images/sutra5.jpg"),"洛杉矶","好莱坞式繁华",445]},
            {region:[require("../../../public/images/sutra6.jpg"),"巴黎岛","度蜜月得首选",396]}
        ]
    };
  }
};
</script>

<style scoped>
.sutra_content {
  width: 100%;
  margin: 12px 8px;
  display:flex;
  justify-content: space-between;
}
.sutra_single > a:hover {
  text-decoration: none;
}
.sutra_single {
  width: 160px;
}
.sutra_tilte {
  font-size: 14px;
  font-weight: 800;
  color: #484848;
  margin-top:8px;
}
.sutra_tilte span:first-child{
    margin-right:8px;
}
.sutra_tilte span:last-child{
    font-size: 12px;
    display: block;
}
</style>